<template>
    <div class="equipmentDialog">
        <el-dialog :title="dialogName" :model-value="dialogVisible" :close-on-click-modal="false" :show-close="false"
            :modal="false" top="32vh" width="30%" label-position="top" class="left-dialog" :before-close="close">
            <el-form ref="ruleForm" :model="formData" :rules="formRules">
                <el-form-item label="">
                    <el-radio-group v-model="formData.types">
                        <el-radio v-for="opt in controlTypeList" :key="opt.id" :label="opt.value" name="type">
                            {{ opt.label }}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleReset('ruleForm')">取 消</el-button>
                <el-button type="primary" @click="handleSubmit('ruleForm')">
                    确 定
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'ControlTypeDialog',
    props: {},
    data() {
        return {
            dialogVisible: false, // 设备对话框
            dialogName: '',
            formData: {
                types: [],
            },
            formRules: {},
            controlTypeList: [],
        }
    },
    created() {
        this.controlTypeList = [ //控制类型列表
            { id: '1', value: 'rs232', label: 'RS-232' },
            { id: '2', value: 'rs485', label: 'RS-485' },
            { id: '3', value: 'tcp', label: 'TCP' },
            { id: '4', value: 'crestronnet', label: 'Crestronnet' },
            { id: '5', value: 'bgserver', label: 'BGServer' },
            { id: '6', value: 'relay', label: 'Relay' },
            { id: '7', value: 'time', label: 'Time' },
            { id: '8', value: 'IO', label: 'IO' },
            { id: '9', value: 'udp-recv', label: 'udp-recv' },
            { id: '10', value: 'udp-send', label: 'udp-send' },
        ]
    },
    mounted() { },
    methods: {
        // 显示弹框
        show(val) {
            // if(val){
            //   this.formData.types = val.split(',') // 已存在控制类型
            // }
            this.dialogVisible = true
            // this.formData.id = Math.random().toString(36).slice(2)
        },
        close() {
            this.formData = { types: [] }
            this.dialogVisible = false
        },
        // 取消操作
        handleReset(formName) {
            this.$refs[formName].resetFields()
            this.close()
        },
        // 确认提交
        handleSubmit(formName) {
            console.log(formName)
            this.$refs[formName].validate((valid) => {
                console.log(valid);
                if (valid) {
                    this.$emit('change-control-type', this.formData)
                    this.close()
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
::v-deep .left-dialog {
    margin-left: calc(60%);
    padding: 0 30px;

    .el-dialog__title {
        font-weight: 700;
    }

    .el-dialog__body {
        border-color: transparent;
    }
}

:deep(.el-radio-group) {
    flex-wrap: wrap;
}
</style>
